<link rel="stylesheet" type="text/css" href="css/default-grid.css" />
<link rel="stylesheet" type="text/css" href="css/component-grid.css" />
<link rel="stylesheet" type="text/css" href="css/blueimp-gallery.min.css" />

<?php 
  include("includes/header_no_bg.php");
  include("includes/connection.php");
  include("includes/Mobile_Detect.php");
  $detect = new Mobile_Detect;
  $deviceType = ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'phone') : 'computer');
  $scriptVersion = $detect->getScriptVersion();

  $idPort = base64_decode($_GET['id']);

  $sql = "SELECT * FROM tb_portfolio WHERE id = '".$idPort."'";
  $query = mysql_query($sql);
  $port = mysql_fetch_array($query);
?>

<style type="text/css">
  .og-grid>li>img {
    width: 200px;
  }
  .og-grid li {
    height: 200px;
    width: 200px;
    background-color: #FFF;
    overflow: hidden;
  }
  .blueimp-gallery>.prev, .blueimp-gallery>.next {
    border: none;
  }
  #content-placer p, #content-placer h4 {
    text-align: left;
  }
  #content-placer {
    margin-top: 90px;
  }
</style>

<section data-speed="4" data-type="background">
  <div id="file-port" class="content">
    <div id="content-placer" class="row">
      <div class="content-tab" class="row sub-port-placer">
        <div class="col-xs-12 col-sm-push-6 col-sm-6 text-detail-placer">
          <h4>
            <?php echo $port['judul']; ?>
          </h4>
          <hr>
          <?php echo $port['keterangan']; ?>
          <hr>
          <span><i class="fa fa-link"></i> Link : </span>
          <?php  
            $target = "";
            $link = strtolower($port['link']);
            $pos = strpos($link, "www.");
            if ($pos !== false) {
              $target = "_blank";
              if (strpos($link, "http://") === false) {
                $link = "http://".$link;
              }
            }
          ?>
          <a target="<?php echo $target; ?>" href="<?php echo $link; ?>">
            <?php echo (($port['link'] == "#") || (!isset($port['link']))) ? 'Offline' : $port['link']; ?>
          </a>
        </div>
        <div class="clearfix visible-xs"></div>
        <div class="col-xs-12 col-sm-pull-6 col-sm-6 file-image-detail">
          <div class="main">
            <ul id="photoReview" class="og-grid">
              <?php
                $sql_portfolio = "SELECT * FROM tb_portfolio_image WHERE id_portfolio = '$idPort'";
                $query_portfolio = mysql_query($sql_portfolio);
                while ($result_port = mysql_fetch_array($query_portfolio)) {
              ?>
                  <li>
                    <a href="img/portfolio/<?php echo $result_port['code'] ?>/<?php echo $result_port['gambar']?>" title="<?php echo $result_port["gambar"]; ?>" download="img/portfolio/<?php echo $result_port['code'] ?>/thumbnail/<?php echo $result_port['gambar']?>" data-gallery="">
                      <img src="img/portfolio/<?php echo $result_port['code'] ?>/<?php echo $result_port['gambar']?>" alt="<?php echo $result_port['gambar']?>"/>
                    </a>
                  </li>
              <?php
                }
              ?>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- BLUE IMP CONTAINER -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
   <div class="slides"></div>
   <h3 class="title"></h3>
   <a class="prev"><i class="fa fa-chevron-left"></i></a>
   <a class="next"><i class="fa fa-chevron-right"></i></a>
   <a class="close"><i class="fa fa-times"></i></a>
   <a class="play-pause"></a>
   <ol class="indicator"></ol>
</div>



<?php include("includes/footer_no_bg.php"); ?>

<script type="text/javascript" src="js/jquery.blueimp-gallery.min.js"></script>

